<template>
    <div class="type">
        <div id="sh">
            <p id="p1">{{title}} ></p>
            <p id="p2">{{name}} ></p>
        </div>
        <van-grid :column-num="3">
            <van-grid-item id="wz" v-for="value in text" :key="value" :text="value" />
        </van-grid>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                text: ["爱情/情感","玄幻/新武侠/魔幻/科幻","古代言情","穿越/重生/架空","校园","展开"]
            }
        },
        props:{
            title: String,
            name: String,
        }
    }
</script>

<style lang="scss" scoped>
    .type{
        width: 94%;
        margin-left: 2vw;
        margin-top: 3vw;
        background: #fff;
    }
    #sh{
        width: 100%;
        position: relative;
        border: 1pm solid #aaa;
        display: flex;
        padding-top: 3vw;
        padding-bottom: 3vw;
    }
    #sh #p1{
        padding-left: 3vw;
        font-weight: bold;
        font-size: 4vw;
    }
    #sh #p2{
        position: absolute;
        right: 3vw;
        font-size: 3.5vw;
    }
    .van-grid-item__text{
        text-align: center;
    }
    #wz{
        text-align: center;
    }
</style>